<template>
  <div>
    <el-table :data="accountInfo" border style="width: 100%">
      <el-table-column prop="accountId" label="账户编号" width="200">
      </el-table-column>
      <el-table-column prop="accountUsername" label="账户名" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.accountId)" type="text" size="small">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="ruleInfo" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="rule in allruleInfo" :label="rule.roleId" :key="rule.roleId">{{rule.roleName}}</el-checkbox>
        </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="updateAccountRule">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
      <el-form label-width="100px">
      <el-form-item label="请输入用户名">
        <el-input v-model="accountUsername"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="saveAccount">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"zhanghao",
    data(){
      return{
        accountInfo:[],
        dialogVisible:false,
        dialogVisible2:false,
        allruleInfo:[],
        ruleInfo:[],
        accountId:"",
        Ruleids:[],
        accountUsername:""
      }
    },
    methods:{
      handleClose(done) {
        location.reload();
      },
      qx() {
        this.dialogVisible = false
        location.reload()
      },
      //查询所有账户
      getAllAccount(){
        this.$http.get("/account/getAllAccount").then(resp=>{
          this.accountInfo=resp.data.data;
        })
      },
      handleClick(id){
        this.accountId=id;
        this.$http.get("/role/getAllRule").then(resp=>{
          this.allruleInfo=resp.data.data.records
        })
        this.$http.get("/accountRole/findRuleId",{params:{id:id}}).then(resp=>{
          //表示选中的id
          if(resp.data.data.ruleIds==null){
              this.ruleInfo=[]
          }else{
            this.ruleInfo=resp.data.data.ruleIds;
          }

        })
        this.dialogVisible=true;
      },
      handleCheckedCitiesChange(value){
        //拿到所有选中的ruleId数组
          this.Ruleids=value
      },
      updateAccountRule(){
        this.$http.post("accountRole/updateAccountRule",{accountId:this.accountId,ruleIds:this.Ruleids}).then(resp=>{
          alert(resp.data.message)
          if(resp.data.code==200){
            this.dialogVisible=false;
            location.reload()
          }else{
            this.dialogVisible=false;
            location.reload()
          }
        })
      }
    },
    created() {
      this.getAllAccount()
    }
  }

</script>

<style>
</style>
